<script setup name="pageSystemRole">
import { ref, onMounted } from 'vue'
import { isRolesManage, isRolesCreate, isRolesUpdate, isRolesDelete, isRolesPermissions } from '@/mixins/permission'
import * as funRole from "@/apis/system/role"
import RoleEdit from "./components/roleEdit.vue"
import RolePermission from "./components/rolePermission.vue"

// 查询条件
const listQuery = ref({
    keywords: null,
    page: 1,
    size: $Common.appPageSize
})
const tableData = ref([])
const isPagination = ref(false)
const total = ref(0)
const pageSizes = $Common.appPageSizes

// 初始化数据
onMounted (() => {
    getListData()
})

// 分页查询
const handleSizeChange = (val) => {
    $Common.fullLoading()
    listQuery.value.size = val
    getListData()
}
const handleCurrentChange = (val) => {
    $Common.fullLoading()
    listQuery.value.page = val
    getListData()
}

// 查询数据
const getListData = async () => {
    $Common.fullLoading()
    funRole.getAll(listQuery.value).then(response => {
        $Common.closeFullLoading()
        total.value = response.totalCount || 0
        isPagination.value = response.totalCount > 0 || false
        if (response && response.items && response.items.length > 0) {
            tableData.value = response.items
        } else {
            tableData.value = []
        }
    })
}

const _search = () => {
    listQuery.value.page = 1
    getListData()
}

const refRoleEdit = ref(null)
const _edit = (row) => {
    refRoleEdit.value.open(row)
}

const refRolePermission = ref(null)

const _permission = (row) => {
    refRolePermission.value.open(row)
}

const _delete = (row) => {
    if (row && row.id) {
        $Common.confirm("确定要删除名为“" + row.name + "”的角色吗？").then(() => {
            $Common.fullLoading()
            funRole.remove({ id: row.id }).then(res => {
                commonSuccess()
            })
        })
    }
}

const commonSuccess = (val) => {
    let tips = val || "操作成功!"
    $Common.alert(tips).then(() => {
        $Common.closeFullLoading()
        getListData()
    })
}
</script>

<template>
    <div class="page-system-role">
        <div class="toolbars mrgb10">
            <div class="fl">
                <el-button type="primary" plain v-if="isRolesCreate" @click="_edit()">
                    <i class="fa fa-plus"></i>
                    <span class="mrgl5">新增</span>
                </el-button>
            </div>
            <div class="fr"></div>
            <div class="clearb"></div>
        </div>

        <el-table :data="tableData" size="large" border>
            <el-table-column label="角色名" prop="name"></el-table-column>
            <el-table-column label="是否默认角色" min-width="120">
                <template #default="scope">
                    {{ scope.row.isDefault ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="202px">
                <template #default="scope">
                    <el-button type="primary" plain size="small" v-if="isRolesPermissions" @click.native="_permission(scope.row)">权限</el-button>
                    <el-button type="warning" plain size="small" v-if="isRolesUpdate" @click.native="_edit(scope.row)">编辑</el-button>
                    <el-button type="danger" plain size="small" v-if="isRolesDelete" @click.native="_delete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :current-page="listQuery.page" :page-sizes="pageSizes" :page-size="listQuery.size" 
                :hide-on-single-page="false" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!--角色编辑-->
        <RoleEdit ref="refRoleEdit" @refreshData="getListData()"></RoleEdit>

        <!--角色权限-->
        <RolePermission ref="refRolePermission" @refreshData="getListData()"></RolePermission>
    </div>
</template>

<style lang="scss" scoped></style>